import React, {Component} from "react";
// import store from "../store";
import {List, Button, Input} from "antd";
import Todolist from './TodoList.css'
import {connect} from "react-redux";
import {changeList, changeValue} from "../store/actions/todoList";


class TodoListReactRedux extends Component {

    //输入方法
    handleChange(e) {
        //修改redux中的value值
        this.props.dispatchChangeValue(e.currentTarget.value)
    }

    //添加方法
    handleClick() {
        const list = this.props.list.concat();
        list.push(this.props.value)
        //修改列表
        this.props.dispatchChangeList(list)

        this.props.dispatchChangeValue(" ")
    }

    //删除方法
    delList(e) {
        const list = this.props.list.concat();
        list.splice(e, 1);
        this.props.dispatchDelList(list);
    }

    render() {

        const {value, list} = this.props

        return (
            <div>

                <div className='active'>
                    <Input placeholder="输入内容" value={value} onChange={this.handleChange.bind((this))}/>
                    <Button type="primary" onClick={this.handleClick.bind(this)}>发送</Button>
                </div>

                <div>
                    <List
                        header={<div>*****************开始*****************</div>}
                        footer={<div>*****************结尾*****************</div>}
                        bordered
                        dataSource={list}

                        renderItem={(item, index) => (
                            <List.Item onClick={this.delList.bind(this, index)}>
                                {item}
                            </List.Item>
                        )}
                    />
                </div>


            </div>
        );
    }
}

//    把state映射到这个组件的props上
//     这个state就是store de state
//取值
// function mapStateToProps(state) {
//     return {
//         value: state.value
//     }
// }

//修改值
// function mapDispatchToProps(dispath) {
//     return {
//         //    修改value   修改的时候有个type 进行区别
//         dispathChangeValue(value) {
//             dispatch({
//                 type: 'changeValue',
//                 value
//             })
//         }
//     }
// }


//connect 要的是函数
// export default connect(mapStateToProps,mapDispatchToProps)(TodoListReactRedux);
//简写
export default connect(state => ({...state}), dispatch => ({
    dispatchChangeValue(value) {
        dispatch(changeValue(value))
    },
    dispatchChangeList(list) {
        dispatch(changeList(list))
    },
    dispatchDelList(list) {
        dispatch({
            type: "delList",
            list
        })
    }
}))(TodoListReactRedux);